<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
	</head>
	<body>
		<!--
			1.文档流
				水平方向（从左往右）：行内元素，行内块级元素
				垂直方向（从上往下）：块级元素
			2.使用浮动实现（float）：
			元素既是块级元素，也可以共处一行
				分为两种（左浮动（float：left；）、右浮动（float：right））
		-->
		<!--emmet写法（快捷） ：ul>li{新闻$}*10-->
		<style type="text/css">
			li{
				list-style: none;
				float: left;
				cursor: pointer;
			}
			.clear{
				clear: both;
			}
			.wrap{
				border:1px solid #0000FF;
			}
			
			.fl{
				float: left;
			}
			
			.fr{
				float: right;
			}
		</style>
		<ul>
			<li>新闻1</li>
			<li>新闻2</li>
			<li>新闻3</li>
			<li>新闻4</li>
			<li>新闻5</li>
			<li>新闻6</li>
			<li>新闻7</li>
			<li>新闻8</li>
			<li>新闻9</li>
			<li>新闻10</li>
			<!--
				清除浮动，最后面加div
				清除浮动警戒线。
				使用浮动后一定要在最后的浮动元素添加div来清除浮动
				要放在父级里面
			-->
			<div class="clear"></div>
		</ul>
		
		<div style="height: 100px ;width: 100%; background-color: yellow;"></div>
		<div class="wrap">
			<span class="fl">正在热映</span>
			<a class="fr">全部</a>
			<div class="clear"></div>
		</div>
		<div style="height: 100px ;width: 100%; background-color: yellow;"></div>
		<!----------------------------------------->
		
		<style type="text/css">
			/*子代选择器()只会作用儿子*/
			.ib>li{
				float: none;/*不浮动()清除上面的浮动*/
				display: inline-block;
				width: 40px;
				margin-right: 10px;
				border: 1px solid #D2691E;
				vertical-align: top;
				/*overflow: hidden;超出范围自动隐藏*/
			}
		</style>
		<ul class="ib">
			<li>
				<div>文字123</div>
			</li>
			<li>
				<div>文字</div>
			</li>
			<li>
				<div>文字123</div>
			</li>
			<li>
				<div>文字123</div>
			</li>
		</ul>
	</body>
</html>
